<template>
	<view class="WareEdit">
		<view class="title">
			{{id ? '编辑' : '新建'}}物品
		</view>
		<view class="form">
			<view class="form-item">
				<view class="label">
					物品名称
				</view>
				<view class="value">
					<input v-model="item.name" class="uni-input" maxlength="10" placeholder="最大输入长度为10" />
				</view>
			</view>
			<view class="form-item">
				<view class="label">
					物品数量
				</view>
				<view class="value">
					<input v-model="item.count" class="uni-input" type="number">
				</view>
			</view>
			<view class="form-item">
				<view class="label">
					物品图片
				</view>
				<view class="value">
					<view class="image_upload" @tap="uploadImage">
						<image v-if="!!item.imgUrl" class="ware_image" :src="item.imgUrl" mode="widthFix"></image>
						<image v-else class="upload_icon" src="../../static/icon/jiahao.svg" mode="widthFix"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="saveBtn" @tap="save">
			保存
		</view>
		<uni-popup ref="message" type="message">
			<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				item: {
					name: '',
					count: '',
					imgUrl: ''
				},
				msgType: '',
				messageText: ''
			}
		},
		onLoad(option) {
			this.id = option.id;
			this.id && this.getDetail(this.id)
		},
		methods: {
			async getDetail(id) {
				const [err, res] = await uni.request({
					url: `${this.BASE_URL}/getWareItem/${id}`
				})
				this.item = res.data.data;
			},
			uploadImage() {
				let _this = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success(res) {
						const tempFilePaths = res.tempFilePaths;
						uni.uploadFile({
							url: 'http://localhost:1721/upload',
							filePath: tempFilePaths[0],
							name: 'ware_image',
							success(uploadFileRes) {
								const obj = JSON.parse(uploadFileRes.data);
								console.log(uploadFileRes);
								_this.item.imgUrl = obj.url;
							}
						})
					}
				})
			},
			save() {
				const _this = this;
				if(this.id) {
					uni.request({
						url: _this.BASE_URL + '/ware' + '/' + _this.id,
						method: 'POST',
						data: {
							name: _this.item.name,
							count: _this.item.count,
							imgUrl: _this.item.imgUrl
						},
						success() {
							_this.msgType = 'success',
							_this.messageText = '更新物品成功'
							_this.$refs.message.open();
							setTimeout(() => {
								uni.navigateTo({
									url: "/pages/WareHouse/WareHouse"
								})
							}, 2000)
						}
					})
				} else {
					uni.request({
						url: _this.BASE_URL + '/ware',
						method: 'POST',
						data: {
							name: _this.item.name,
							count: _this.item.count,
							imgUrl: _this.item.imgUrl
						},
						success() {
							_this.msgType = 'success',
							_this.messageText = '创建物品成功'
							_this.$refs.message.open();
							setTimeout(() => {
								uni.navigateTo({
									url: "/pages/WareHouse/WareHouse"
								})
							}, 2000)
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.WareEdit {
		.title {
			font-size: 48rpx;
			font-weight: bold;
			margin: 20rpx 10rpx;
		}
		.form {
			.form-item {
				margin: 20rpx 0;
				.label {
					color: #656572;
					font-weight: bold;
					font-size: 32rpx;
					margin: 10rpx 20rpx 20rpx 20rpx;
				}
				.value {
					margin: 10rpx 20rpx;
					
					input {
						border: 1px solid #d9d9d9;
						height: 80rpx;
						padding: 0 10rpx;
						border-radius: 10rpx;
						
						&:hover {
							border: 1px solid #4096ff;
						}
					}
					
					.image_upload {
						width: 300rpx;
						height: 300rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						border: 1px dashed #4096ff;
						
						.ware_image {
							width: 100%;
						}
						
						.upload_icon {
							width: 100rpx;
							height: 100rpx;
						}
					}
				}
			}
		}
		.saveBtn {
			width: 100%;
			height: 160rpx;
			line-height: 160rpx;
			background-color: #4096ff;
			color: #fff;
			font-weight: bold;
			font-size: 48rpx;
			text-align: center;
			position: fixed;
			bottom: 0;
			left: 0;
		}
	}
</style>
